<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>人员研发打卡</title>
	<script th:src="@{/js/jquery.min.js}"></script>
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<!-- bootstrap-table 表格插件样式 -->
	<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210602}" rel="stylesheet"/>
	<link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/style.min.css?v=20200903}" rel="stylesheet"/>
	<link th:href="@{/ruoyi/css/ry-ui.css?v=4.6.2}" rel="stylesheet"/>
    
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    
        <!-- <script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script> -->
    <script src="/wechat/vue@3.2.27-vue.global.js" type="text/javascript"></script>
    
    <!-- 导入样式 -->
  	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
  	<link rel="stylesheet" href="/wechat/element-plus@2.0.3-index.css" />
  	<!-- 导入组件库 -->
    <!--  <script src="//unpkg.com/element-plus"></script> -->
    <script src="/wechat/element-plus@2.0.3-index.full.js" type="text/javascript"></script>
    
    <!-- axios -->
<!--     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script src="/wechat/axios@0.26.0-axios.min.js" type="text/javascript"></script>
    <script src="/wechat/qs@6.7.0-qs.min.js" type="text/javascript"></script>
    
  <!--   <script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script>
    导入样式
  	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  	导入组件库
    <script src="//unpkg.com/element-plus"></script>
    axios
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    
    <style>
    	.row {
    		display:flex;
    		flex-direction:row;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.row-ai-c {
    		align-items:center;
    	}
    	.row-jc-sb {
    		justify-content: space-between;
    	}
    	.row-jc-sa {
    		justify-content: space-around;
    	}
    	
    	
    	.column {
    	    display:flex;
    		flex-direction:column;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.column-ai-c {
    		align-items:center;
    	}
    	
    	/* ------------------------- */
    	.col-aw-sb-ct-0 {
    		width:auto;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.col-fw-sa-fs-1 {
    		width:100%;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-around;
    		align-items: flex-start;
    		flex-grow: 1;
    	}
    	.row-fw-sb-ct-0 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.row-fw-sb-ct-1 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 1;
    	}
    	
    	/* ------------------------------- */
    	.icon {
    		background-repeat: no-repeat;
    		background-position: center;
    		background-size: cover;
    	}
    	.i-sm {
    		width: calc(14.58px * 0.5);
    		height: calc(26.7px * 0.5);
    	}
    	.i-md {
    		width: calc(24px * 1);
    		height: calc(24px * 1);
    	}
    	.i-arrow-right {
    		background-image: url("/img/arrow_right.png");
    	}
    	.i-iconography_caesarzkn {
    		background-image: url("/img/icon2.png");
    	}
    </style>
    <style>
    	* {
    		padding: 0px;
    		margin: 0px;
    	}
    	html, body, #app {
    		padding: 0px;
    		margin: 0px;
    		height: 100%;
    	}
    	
    	#app {
    		display:flex;
    		flex-direction:column;
    	}
    	
    	.title-bar {
    		text-align:center;
    		background-color:#66CE57;
    		height:50px;
    		line-height:50px;
    		width:100%;
    		color:white;
    	}
    	
    	.content-area {
    		display:flex;
    		flex-direction:column;
    		align-items:center;
    		flex-grow:1;
    	}
    	.project-sel {
    		background-color:#E9E9E9;
    		width:100%;
    		height:60px;
    		padding-top:10px;
    		padding-bottom:10px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    	.sel-item {
    		background-color:red;
    	}
    	
    	.selector {
    		background:none;
    		background-color:transparent;
    		flex-grow:1;
    		margin-left:10px;
    		margin-right:10px;
    	}
    	
    	.el-date-editor {
    		width: 100% !important;
    	}
    	.el-date-editor .el-input__inner {
		    padding-left: 12px !important;
		}
		.el-date-editor .el-input__prefix {
			display:none;
		}
    	
    	.el-input__inner {
    		border:none !important;
    		background-color:transparent; 
    		background:none;
    		padding-left: 0px;
    		padding-right: 0px !important;
    	}
    	.el-input__suffix{
    		display:none;
    	}
    	
    	    	.el-select {
    		background:none;
    		background-color:transparent;
    		/* ----------- */
    		/* width: 100% */
    		flex-grow:1;
    		/* ----------- */
    		margin-left:10px;
    		margin-right:10px;
    	}
    	
    	.el-select .el-select__tags-text {
		    justify-content: flex-start !important;
		}
    	
    	.el-date-editor {
    		width: 100% !important;
    	}
    	.el-date-editor .el-input__inner {
		    padding-left: 12px !important;
		}
		.el-date-editor .el-input__prefix {
			display:none;
		}
    	
    	/* 去掉输入框的边框和背景 */
    	.el-input__inner {
    	    box-shadow: 0 0 0 0px red inset!important;
    		/* ------------------------------------ */
    		background-color:transparent; 
    		background:none;
    		/* ------------------------------------ */
    		padding-left: 0px;
    		padding-right: 0px !important;
    	}
    	.el-input.is-focus .el-input__inner {
		    box-shadow: 0 0 0 0px red inset!important;
		}
		.el-select:hover:not(.el-select--disabled) .el-input__inner{
			box-shadow: 0 0 0 0px red inset!important;
		}
		.el-select .el-input__inner:focus {
			 box-shadow: 0 0 0 0px red inset!important;
		}
		
		/* 去掉右侧的下拉箭头 */
    	.el-input__suffix{
    		display:none;
    	}
    	
    	.el-tree {
    		background: #e2e2e2;
    		margin-left:10px;
    		margin-right:10px;
    	}
    </style>
    
    <style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<style type="text/css">
	#dateOp {
		padding-left: 10px;
		width: 100%;
	}
	
    #dateOp select{
      width:25%;
    }
  </style>
  <script>
  function Toast(cont,millisecond){

    millisecond=isNaN(millisecond)?3000:millisecond;

    var m = document.createElement('div');

    m.innerHTML = cont;

    m.style.cssText="max-width: 90%;min-width: fit-content;padding:0 0.28rem;color: rgb(255, 255, 255);line-height: 0.8rem;text-align: center;border-radius: 0.08rem;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 0.32rem;";

    document.body.appendChild(m);

    setTimeout(function() {

        var d = 0.5;

        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';

        m.style.opacity = '0';

        setTimeout(function() { document.body.removeChild(m) }, d * 1000);

    }, millisecond);

}
  
  </script>
</head>

<body>
    <div id="app">
	  <div class="title-bar" v-on:click="switchTimeComp">
	  	研发人员打卡
	  </div>
	  
	  <div class="content-area">
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn"></div>
		     <el-select filterable :change="projectSelect" v-model="personProjectId" :suffix-icon="ArrowDown" placeholder="Select" class="selector">
			    <el-option
			      v-for="item in projects"
			      :key="item.id"
			      :label="item.text"
			      :value="item.id"
			    >
			    </el-option>
			  </el-select>
		    <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>

		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <div id="dateOp">
			  <select id="selectYear" onchange="getDay()"></select>年
			  <select id="selectMonth" onchange="getDay()"></select>月
			  <select id="selectDay"></select>日
			</div>
		    <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
			     <div id="dateOp">
				  <select id="selectHour"></select>时
				  <select id="selectMin"></select>分
				  <select id="selectSec"></select>秒
				</div>
		     <el-tag type="info">打卡时间</el-tag>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="!this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-date-picker :editable="false" value-format="YYYY-MM-DD" :change="dateSelect()" v-model="clockdatetime" type="date" placeholder="Pick a day"></el-date-picker>
		     <el-tag type="info">上班日期</el-tag>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="!this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-date-picker :editable="false" default-value="clockdatetime3" v-model="clockdatetime3"  type="datetime" placeholder="Pick a day"></el-date-picker>
		     <el-tag type="info">打卡时间</el-tag>
		  </div>
		  
		  <!-- <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="!this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-time-picker v-model="clockdatetime2" placeholder="请选择打卡时间"></el-time-picker>
		     <el-tag type="info">打卡时间</el-tag>
		  </div> -->
		  
		  <div class="col-fw-sa-fs-1" style="border-bottom: 1px dashed #D3D3D3;">
		  	<div class="row-fw-sb-ct-1" style="background-color:#E7E7E7; padding: 15px;">
			  	<div class="col-aw-sb-ct-0" style="">
			  		<div style="font-size: 32px;color:#67CE57">{{ shangbanTime }}</div>
			  		<div style="font-size: 18px;color: #ADC8A9;">{{ sbstatus }}</div>
			  	</div>
			  	<el-tag type="info">开始</el-tag>
		  	</div>
		  	
		  	<div class="row-fw-sb-ct-1" style="background-color:#E2E2E2; padding: 15px;">
			  	<div class="col-aw-sb-ct-0" style="">
			  		<div style="font-size: 32px;color:#67CE57">{{ xiabanTime }}</div>
			  		<div style="font-size: 18px;color: #ADC8A9;">{{ xbstatus }}</div>
			  	</div>
			  	<el-tag type="info">结束</el-tag>
		    </div>
		  </div>
		  
		  <div class="row row-jc-sa" style="overflow:hidden;background-color:#E4E4E4;width:100%;height:120px;padding-top:20px;padding-bottom:20px;">
		  		<div @click="sbclock" style="background-color:#60C952;width:80px;height:80px;border-radius:80px;line-height:80px;text-align:center;color:white;">开始</div>
		  		<div @click="xbclock" style="background-color:#60C952;width:80px;height:80px;border-radius:80px;line-height:86px;text-align:center;color:white;">结束</div>
		  </div>
	  </div>
	</div>
	
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    
    <script th:inline="javascript">
	// 为给定 ID 的 user 创建请求

	//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

	
	Date.prototype.format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, //月份
	        "d+": this.getDate(), //日
	        "h+": this.getHours(), //小时
	        "m+": this.getMinutes(), //分
	        "s+": this.getSeconds(), //秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	        "S": this.getMilliseconds() //毫秒
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}
 
    var user = [[${LOGINNAME}]];
    var personId = [[${USERID}]];
    var clockLimit = 0; // 0上班，1下班
    
    	const App = {
   		  data() {
   		    return {
   		      clockdatetime: new Date().format("yyyy-MM-dd"),
   		      clockdatetime2: new Date(),
   		   		clockdatetime3: new Date(),
   		      personProjectId: null,
   		      startDatetime:null,
   		      endDatetime:null,
   		      
   		   	  projects: [],
   		   	  allProjects: [],
   		   	  
   		   	  shangbanTime:"--:--",
   		   	  xiabanTime:"--:--",
   		   	  
   		   	  timecomp:localStorage && localStorage.getItem("timecomp") === "true"
   		    }
   		  },
   		  methods:{
   			switchTimeComp(){
   				this.timecomp = !this.timecomp;
   				localStorage && localStorage.setItem("timecomp", this.timecomp ? "true" : "false");
   			},
   			sumbitClock(issb, clockdates){
   				let that = this;
   				
   				let cdt = "";
   				
   				if(that.timecomp){
   					var selectYear = document.getElementById("selectYear");
   		   		    var selectMonth = document.getElementById("selectMonth");
   		   		    var selectDay = document.getElementById("selectDay");
   		   		    
  	  		  		cdt = `${selectYear.value}-${selectMonth.value}-${selectDay.value}`;
  	  		  		that.clockdatetime = cdt;
   				}else{
   					cdt = that.clockdatetime;
   				}
   				
   				axios.post('/system/clock/wxedit', Qs.stringify({
		   			personProjectId: that.personProjectId,
		   			clockdatetime: cdt,
		   			personId: window.personId,
		   			issb: issb,
		   			clockdates: clockdates
		   		  }))
		   	      .then(function (response) {
		   	        console.log(response);
		   	        
		   	        that.refreshClock();
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });	
   			},
   			refreshClock(){
   			  	let that = this;
   			  	console.log(that.clockdatetime);
  	   		  	axios.post('/system/clock/myclock', Qs.stringify({
		   			personProjectId: that.personProjectId,
		   			clockdatetime: that.clockdatetime,
		   			personId: window.personId
		   		  }))
		   	      .then(function (response) {
		   	        console.log(response);
		   	        if(response.data.code == 500){
		   	        	clockLimit = 0;
		   	        	that.shangbanTime = "--:--";
		   	        	that.xiabanTime="--:--";
		   	        	return;
		   	        }
		   	        if(response.data.startDatetime != null){
		   	        	// that.shangbanTime = response.data.startDatetime.split(" ")[1];
		   	        	that.shangbanTime = response.data.startDatetime;
		   	        }else{
		   	        	that.shangbanTime = "--:--";
		   	        }
		   	     	if(response.data.endDatetime != null){
		   	     		//that.xiabanTime = response.data.endDatetime.split(" ")[1];
		   	     		that.xiabanTime = response.data.endDatetime;
		   	      	}else{
		   	      		that.xiabanTime="--:--";
		   	      	}
		   	     	
		   	     	if(response.data.startDatetime != null && response.data.endDatetime != null){
		   	     		clockLimit = 0;
		   	     	}else if(response.data.startDatetime == null && response.data.endDatetime != null){
		   	     		clockLimit = 0;
		   	     	}else if(response.data.startDatetime != null && response.data.endDatetime == null){
		   	     		clockLimit = 1;
		   	     	}else if(response.data.startDatetime == null && response.data.endDatetime == null){
		   	     		clockLimit = 0;
		   	     	}
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });	
   			},
   			dateSelect(v){
   				//alert(this.clockdatetime);
   				if(this.personProjectId == null){
   					return;
   				}
   				
   				this.refreshClock();
   			},
   			projectFilter(v){
   				this.projects = this.allProjects.filter(item => {
   	              return item.text.toLowerCase().indexOf(v) > -1;
   	            });
   			},
   			projectSelect(v){
   				this.refreshClock();
   			},
   			sbclock(v){
   				if(this.personProjectId == null){
   					alert("请选择打卡项目");
   					return;
   				}
   				if(clockLimit != 0){
   					alert("请先打卡结束");
   					return;
   				}
   				
   				
   				// let sbd = new Date().format("yyyy-MM-dd hh:mm:ss");
   				let sbd = "";
   				if(!this.timecomp){
   					// sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   					// sbd = this.clockdatetime + " " + this.clockdatetime2.format("hh:mm");
   					
   					sbd = this.clockdatetime3.format("yyyy-MM-dd hh:mm");
   				}else{
   					var selectYear = document.getElementById("selectYear");
   		   		    var selectMonth = document.getElementById("selectMonth");
   		   		    var selectDay = document.getElementById("selectDay");
   		   		   var selectHour = document.getElementById("selectHour");
  	  		      var selectMin = document.getElementById("selectMin");
  	  		      var selectSec = document.getElementById("selectSec");
   		   		    
   		   		    sbd = `${selectYear.value}-${selectMonth.value}-${selectDay.value} ${selectHour.value}:${selectMin.value}`;
   				}
   				
   				console.log(sbd);
   				this.sumbitClock(true, sbd);
   			},
   			xbclock(v){
   				if(this.personProjectId == null){
   					alert("请选择打卡项目");
   					return;
   				}
   				if(clockLimit != 1){
   					alert("请先打卡开始");
   					return;
   				}
   				
   				
   				let sbd = "";
   				let hhmm = "";
   				if(!this.timecomp){
   					//hhmm = this.clockdatetime2.format("hh:mm");
   					//sbd = this.clockdatetime + " " + hhmm;
   					
   					sbd = this.clockdatetime3.format("yyyy-MM-dd hh:mm");
   				}else{
   					var selectYear = document.getElementById("selectYear");
   		   		    var selectMonth = document.getElementById("selectMonth");
   		   		    var selectDay = document.getElementById("selectDay");
   		   		   var selectHour = document.getElementById("selectHour");
  	  		      var selectMin = document.getElementById("selectMin");
  	  		      var selectSec = document.getElementById("selectSec");
   		   		    
  	  		 		 hhmm = selectHour.value + ":" + selectMin.value;
   		   		    sbd = `${selectYear.value}-${selectMonth.value}-${selectDay.value} ${selectHour.value}:${selectMin.value}`;
   				}
   				
   				if(this.shangbanTime != "--:--" && sbd < this.shangbanTime){
   					alert("下班时间必须大于上班时间");
   					return;
   				}
   				
   				console.log(sbd);
   				this.sumbitClock(false, sbd);
   			}
   		  },
   		computed: {
   		  sbstatus () {
   		    return (this.shangbanTime != "--:--" && this.shangbanTime != null) ? "已打卡" : "未打卡";
   		  },
   		  xbstatus () {
   		    return (this.xiabanTime != "--:--" && this.xiabanTime != null) ? "已打卡" : "未打卡";
   		  },
   		},
   		mounted(){
   			
   		//得到三个select项
   		window.getYear = getYear;
   		window.getMonth = getMonth;
   		window.getDay = getDay;
   		window.setDay = setDay;
 		   
	   		  
		   		var startYear = 2000;
	  			var endYear = 2050;
	  			var date = new Date();
	  		  var year = date.getFullYear();
	  		  var month = date.getMonth() + 1;
	  		  var day = date.getDate();
	   		  var selectYearElement = document.getElementById("selectYear");
	   		  var selectMonthElement = document.getElementById("selectMonth");
	   		  var selectDayElement = document.getElementById("selectDay");
	   		  //selectYearElement.onchange = getDay();
	   		  //selectMonthElement.onchange = getDay();
	   		  //selectYearElement.addEventListener
	   		  getYear();
	   		  getMonth();
	   		  getDay();
	   		  //年份函数
	   		  function getYear() {
	   		    for (var i = startYear; i <= endYear; i++) {
	   		      var opYearElement = document.createElement("option");
	   		      var textElement = document.createTextNode(i);
	   		      opYearElement.appendChild(textElement);
	   		      opYearElement.value = i;
	   		      selectYearElement.appendChild(opYearElement);
	   		    }
	   		//设置默认年份的值
	   		    selectYearElement.selectedIndex = year - startYear;
	   		  }
	   		  
	   		  
	   		  //月份函数
	   		  function getMonth() {
	   		    for (var i = 1; i <= 12; i++) {
	   		      var opMonthElement = document.createElement("option");
	   		      textMonth = document.createTextNode(i);
	   		      opMonthElement.appendChild(textMonth);
	   		      opMonthElement.value = i;
	   		      selectMonthElement.appendChild(opMonthElement);
	   		    }
	   		//设置默认年份的值
	   		    selectMonthElement.selectedIndex = month - 1;
	   		  }
	   		  
	   		
	   		
	   		  //日期函数
	   		  function getDay() {
	   		    var getSelectedYear = selectYearElement.selectedIndex + startYear;
	   		    var getSelectedMonth = selectMonthElement.selectedIndex + 1;
	   		    var flag = 0;
	   		    var selectDayElement = document.getElementById("selectDay");
	   		    if (selectDayElement.hasChildNodes()) {
	   		      var optionElements = selectDayElement.getElementsByTagName("option");
	   		      for (var i = 0; i < optionElements.length; i++) {
	   		        selectDayElement.removeChild(optionElements[0]);
	   		//不知道为什么必须得自减一
	   		        i--;
	   		      }
	   		    }
	   		    else {
	   		    }
	   		//得到闰年
	   		    if ((getSelectedYear % 4 == 0 && getSelectedYear % 100 != 0) || getSelectedYear % 400 == 0) {//得到闰年的年号
	   		//alert("闰年");
	   		//得到闰年大月份除二月以外
	   		      if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
	   		        setDay(flag = 31);
	   		      }
	   		      else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
	   		        setDay(flag = 29);
	   		      }
	   		      else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
	   		        setDay(flag = 30);
	   		      }
	   		    }
	   		//非闰年
	   		    else {
	   		//alert("平年");
	   		//得到平年大月份除二月以外
	   		      if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
	   		        setDay(flag = 31);
	   		      }
	   		      else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
	   		        setDay(flag = 28);
	   		      }
	   		      else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
	   		        setDay(flag = 30);
	   		      }
	   		    }
	   		  }
	   		  
	   		
	   		
	   		  //设置默认年份的值
	   		  selectDayElement.selectedIndex = day - 1;
	   		  function setDay(dayLength) {
	   		    for (var i = 1; i <= dayLength; i++) {
	   		      var opDayElement = document.createElement("option");
	   		      textMonth = document.createTextNode(i);
	   		      opDayElement.appendChild(textMonth);
	   		      opDayElement.value = i;
	   		//alert(i);
	   		      selectDayElement.appendChild(opDayElement);
	   		    }
	   		  }
	   		
	   		  
	   	   	 // ------------------------------------------------------
	     		
	     	var selectHourElement = document.getElementById("selectHour");
	  		  var selectMinElement = document.getElementById("selectMin");
	  		  var selectSecElement = document.getElementById("selectSec");
	   		
	  		  for (let i = 0; i <= 23; i++) {
	  		      let opYearElement = document.createElement("option");
	  		      let textElement = document.createTextNode(i);
	  		      opYearElement.appendChild(textElement);
	  		      opYearElement.value = i;
	  		    selectHourElement.appendChild(opYearElement);
	  		    }
	  		    //设置默认时间
	  		    selectHourElement.selectedIndex = date.getHours();
	  		    
	  		  for (let i = 0; i <= 59; i++) {
	  		      let opYearElement = document.createElement("option");
	  		      let textElement = document.createTextNode(i);
	  		      opYearElement.appendChild(textElement);
	  		      opYearElement.value = i;
	  		    selectMinElement.appendChild(opYearElement);
	  		    }
	  		    //设置默认分钟
	  		    selectMinElement.selectedIndex = date.getMinutes(); 
	  		    
	  		  for (let i = 0; i <= 59; i++) {
	  		      let opYearElement = document.createElement("option");
	  		      let textElement = document.createTextNode(i);
	  		      opYearElement.appendChild(textElement);
	  		      opYearElement.value = i;
	  		    selectSecElement.appendChild(opYearElement);
	  		    }
	  		    //设置默认分钟
	  		    selectSecElement.selectedIndex = 0;//date.getSeconds(); 
	   		   // ------------------------------------------------------
   		},
   		  created(){
   			  let that = this;
	   		  axios.get('/system/project/select2')
		   	      .then(function (response) {
		   	     	that.projects = response.data.results;
		   	     	that.allProjects = that.projects;
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });
	   		  
	   		  //this.refreshClock();
   		  }
   		}

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>